Refactoring to support downstream work in UIDS Base card updates (#847)

uiowa · Apr 18, 2023 · d6ca8f8 · d6ca8f8
1 parent 7c085a3
commit d6ca8f8
Show file tree

Hide file tree

Showing 13 changed files with 310 additions and 212 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,9 +2,6 @@
 logs
 *.log
 npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
@@ -19,6 +16,15 @@ package-lock.json
 /cypress/videos/
 /cypress/screenshots/
 
+# Yarn
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-14.15.1
+14
diff --git a/package.json b/package.json
@@ -27,7 +27,8 @@
     "build-storybook": "build-storybook"
   },
   "dependencies": {
-    "vue": "^3.2.31"
+    "vue": "^3.2.31",
+    "yarn": "^1.22.19"
   },
   "devDependencies": {
     "@babel/core": "^7.17.9",

diff --git a/src/assets/scss/_grid.scss b/src/assets/scss/_grid.scss
@@ -8,40 +8,45 @@
   gap: $desktop-width-gutter;
   grid-template-columns: repeat(auto-fill, minmax(29.74%, 1fr));
 }
+
+@mixin fourcol-grid {
+  gap: $desktop-width-gutter;
+  grid-template-columns: repeat(auto-fill, minmax(21%, 1fr));
+}
 ////// Inner Grid
 @mixin inner-grid($parent) {
-  .inner--grid.grid--twocol--50-50 {
+  .list-container--grid.grid--twocol--50-50 {
     @if $parent >= 50 {
-      @include breakpoint(md) {
-        .list-container {
+      @include breakpoint(sm) {
+        .list-container__inner {
           display: grid;
           @include twocol-grid;
-          // @todo Remove when uiowa/uiowa#2670 and uiowa/uiowa#2554 are resolved.
-          .card.card--media-left,
-          .card.card--media-right {
-            margin-bottom: 0;
-          }
         }
       }
       @media screen and (min-width: 58.125em) {
-        .list-container {
+        .list-container__inner {
           gap: $desktop-width-gutter;
           grid-template-columns: 1fr 1fr;
         }
       }
     }
   }
-  .inner--grid.grid--threecol--33-34-33 {
+  .list-container--grid.grid--threecol--33-34-33 {
     @if $parent >= 75 {
       @media screen and (min-width: 58.125em) {
-        .list-container {
+        .list-container__inner {
           display: grid;
           @include threecol-grid;
-          // @todo Remove when uiowa/uiowa#2670 and uiowa/uiowa#2554 are resolved.
-          .card.card--media-left,
-          .card.card--media-right {
-            margin-bottom: 0;
-          }
+        }
+      }
+    }
+  }
+  .list-container--grid.grid--fourcol--25 {
+    @if $parent >= 75 {
+      @media screen and (min-width: 58.125em) {
+        .list-container__inner {
+          display: grid;
+          @include fourcol-grid;
         }
       }
     }
@@ -55,7 +60,7 @@
 }
 
 @mixin grid-base {
-  @include breakpoint(md) {
+  @include breakpoint(sm) {
     @include display-grid;
     grid-template-columns: 1fr;
   }

diff --git a/src/assets/scss/_utilities.scss b/src/assets/scss/_utilities.scss
@@ -200,7 +200,10 @@
 
 @mixin border {
   border: 1px solid;
-  border-color: rgba(0,0,0,.425);
+  border-color: rgba(0,0,0,.125);
+  [class*="bg--black"] & {
+    border-color: hsla(0,0%,100%,.325);
+  }
 }
 
 @mixin text-light {

diff --git a/src/components/button/button.scss b/src/components/button/button.scss
@@ -87,18 +87,6 @@
   [class*="bg--black"] [class*="bg--gold"] & {
     color: $secondary;
   }
-
-  &:after {
-    [class*="bg--gold"] &,
-    [class*="bg--white"] [class*="bg--gold"] & {
-      background: #fff;
-    }
-
-    [class*="bg--white"] &,
-    [class*="bg--gold"] [class*="bg--white"] & {
-      background: $primary;
-    }
-  }
 }
 
 .bttn.borderless {

diff --git a/src/components/card/Card.stories.js b/src/components/card/Card.stories.js
@@ -15,12 +15,12 @@ export default {
     // Props
     headline_style: {
       name: 'Title style',
-      options: ['', 'serif'],
+      options: ['serif', ''],
       control: {
         type: 'select',
         labels: {
-          '': 'default',
-          serif: 'Serif',
+          'serif': 'Zilla Slab (default)',
+          '': 'Roboto',
         },
       },
       table: {
@@ -121,11 +121,52 @@ export default {
         category: 'Content',
       },
     },
-  },
-  parameters: {
-    viewport: {
-      viewports: parameters.viewport.viewports,
-      defaultViewport: 'mobile2',
+    section_background: {
+      name: 'Section background',
+      options: [
+        '',
+        'bg--black',
+        'bg--black--pattern--brain',
+        'bg--black--pattern--community',
+        'bg--black--pattern--particle',
+        'bg--gold',
+        'bg--gold--pattern--brain',
+        'bg--gold--pattern--community',
+        'bg--gold--pattern--particle',
+        'bg--gray',
+        'bg--gray--pattern--brain',
+        'bg--gray--pattern--community',
+        'bg--gray--pattern--particle',
+        'bg--white',
+        'bg--white--pattern--brain',
+        'bg--white--pattern--community',
+        'bg--white--pattern--particle',
+      ],
+      control: {
+        type: 'select',
+        labels: {
+          '': '- None -',
+          'bg--black': 'Black',
+          'bg--black--pattern--brain': 'Black - Brain pattern',
+          'bg--black--pattern--community': 'Black - Community pattern',
+          'bg--black--pattern--particle': 'Black - Particle pattern',
+          'bg--gold': 'Gold',
+          'bg--gold--pattern--brain': 'Gold - Brain pattern',
+          'bg--gold--pattern--community': 'Gold - Community pattern',
+          'bg--gold--pattern--particle': 'Gold - Particle pattern',
+          'bg--gray': 'Gray',
+          'bg--gray--pattern--brain': 'Gray - Brain pattern',
+          'bg--gray--pattern--community': 'Gray - Community pattern',
+          'bg--gray--pattern--particle': 'Gray - Particle pattern',
+          'bg--white': 'White',
+          'bg--white--pattern--brain': 'White - Brain pattern',
+          'bg--white--pattern--community': 'White - Community pattern',
+          'bg--white--pattern--particle': 'White - Particle pattern',
+        },
+      },
+      table: {
+        category: 'Container',
+      },
     },
   },
 }
@@ -140,27 +181,33 @@ const Template = (args) => ({
   },
   // And then the `args` are bound to your component with `v-bind="args"`
   template: `
-      <uids-card
-        :url="args.url"
-        :link_text="args.link_text"
-        :link_indicator="args.link_indicator"
-        :button_align_bottom="args.button_align_bottom"
-        :headline_style="args.headline_style"
-        :borderless="args.borderless"
-        :background="args.background"
-        :orientation="args.orientation"
-        :media_size="args.media_size"
-        :media_shape="args.media_shape"
-        :media_border="args.media_border"
-        :media_padded="args.media_padded"
-        :centered="args.centered"
-      >
-        <template #media v-if="args.media"><span v-html="args.media" ></span></template>
-        <template #title v-if="args.title"><div v-html="args.title" ></div></template>
-        <template #subtitle v-if="args.subtitle"><div v-html="args.subtitle" ></div></template>
-        <template #meta v-if="args.meta"><div v-html="args.meta" ></div></template>
-        <template #default><div v-html="args.default"></div></template>
-      </uids-card>
+    <div :class="args.section_background" style="padding-top: 2rem; padding-bottom: 2rem;">
+      <div class="grid--threecol--33-34-33">
+        <div class="list-container">
+          <uids-card
+            :url="args.url"
+            :link_text="args.link_text"
+            :link_indicator="args.link_indicator"
+            :button_align_bottom="args.button_align_bottom"
+            :headline_style="args.headline_style"
+            :borderless="args.borderless"
+            :background="args.background"
+            :orientation="args.orientation"
+            :media_size="args.media_size"
+            :media_shape="args.media_shape"
+            :media_border="args.media_border"
+            :media_padded="args.media_padded"
+            :centered="args.centered"
+          >
+            <template #media v-if="args.media"><span v-html="args.media" ></span></template>
+            <template #title v-if="args.title"><div v-html="args.title" ></div></template>
+            <template #subtitle v-if="args.subtitle"><div v-html="args.subtitle" ></div></template>
+            <template #meta v-if="args.meta"><div v-html="args.meta" ></div></template>
+            <template #default><div v-html="args.default"></div></template>
+          </uids-card>
+        </div>
+      </div>
+    </div>
   `,
 })
 
@@ -177,15 +224,16 @@ Default.args = {
   link_text: 'Explore the arts',
   link_indicator: true,
   button_align_bottom: false,
-  headline_style: '',
+  headline_style: 'serif',
   borderless: false,
   background: '',
   centered: false,
   orientation: '',
   media_border: false,
-  media_size: '',
+  media_size: 'large',
   media_shape: 'widescreen',
   media_padded: false,
+  section_background: '',
 }
 
 export const LinkedWithNoButtonText = Template.bind({});
@@ -289,31 +337,33 @@ const GridTemplate = (args) => ({
   },
   // And then the `args` are bound to your component with `v-bind="args"`
   template: `
-    <uids-grid :type="args.type">
-      <uids-grid-item v-for="item in args.records" :key="item">
-        <uids-card
-          :url="args.url"
-          :link_text="args.link_text"
-          :link_indicator="args.link_indicator"
-          :button_align_bottom="args.button_align_bottom"
-          :headline_style="args.headline_style"
-          :borderless="args.borderless"
-          :background="args.background"
-          :orientation="args.orientation"
-          :media_size="args.media_size"
-          :media_shape="args.media_shape"
-          :media_border="args.media_border"
-          :media_padded="args.media_padded"
-          :centered="args.centered"
-        >
-          <template #media v-if="args.media"><span v-html="args.media" ></span></template>
-          <template #title v-if="args.title"><div v-html="args.title" ></div></template>
-          <template #subtitle v-if="args.subtitle"><div v-html="args.subtitle" ></div></template>
-          <template #meta v-if="args.meta"><div v-html="args.meta" ></div></template>
-          <template #default><div v-html="args.default"></div></template>
-        </uids-card>
-      </uids-grid-item>
-    </uids-grid>
+    <div :class="args.section_background" style="padding-top: 2rem; padding-bottom: 2rem;">
+      <uids-grid :type="args.type">
+        <uids-grid-item v-for="item in args.records" :key="item">
+          <uids-card
+            :url="args.url"
+            :link_text="args.link_text"
+            :link_indicator="args.link_indicator"
+            :button_align_bottom="args.button_align_bottom"
+            :headline_style="args.headline_style"
+            :borderless="args.borderless"
+            :background="args.background"
+            :orientation="args.orientation"
+            :media_size="args.media_size"
+            :media_shape="args.media_shape"
+            :media_border="args.media_border"
+            :media_padded="args.media_padded"
+            :centered="args.centered"
+          >
+            <template #media v-if="args.media"><span v-html="args.media" ></span></template>
+            <template #title v-if="args.title"><div v-html="args.title" ></div></template>
+            <template #subtitle v-if="args.subtitle"><div v-html="args.subtitle" ></div></template>
+            <template #meta v-if="args.meta"><div v-html="args.meta" ></div></template>
+            <template #default><div v-html="args.default"></div></template>
+          </uids-card>
+        </uids-grid-item>
+      </uids-grid>
+    </div>
   `,
 })