[CTA] Updated CTA to work with uids_base

src/components/cta/Cta.stories.js

@@ -1,5 +1,8 @@
 import UidsCta from './Cta.vue';
 import Background from "../shared/background";
+import UidsGrid from '../grid/Grid.vue';
+import UidsGridItem from '../grid/GridItem.vue';
+
 
 
 // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
@@ -68,6 +71,53 @@ export default {
         category: 'Display options',
       },
     },
+    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',
+      },
+    },
     ...Background.argTypes,
   },
 };
@@ -82,6 +132,7 @@ const Template = (args) => ({
   },
   // And then the `args` are bound to your component with `v-bind="args"`
   template: `
+    <div :class="args.section_background" style="padding-top: 2rem; padding-bottom: 2rem;">
     <uids-cta
       :url="args.url"
       :background="args.background"
@@ -97,6 +148,7 @@ const Template = (args) => ({
     <template #title v-if="args.title"><div :class="getClasses" v-html="args.title" ></div></template>
     <template #button_icon v-if="args.button_icon"><span v-html="args.button_icon" ></span></template>
     </uids-cta>
+    </div>
   `,
 });
 
@@ -125,3 +177,43 @@ Left.args = {
   ...Centered.args,
   orientation: 'left',
 }
+
+const GridTemplate = (args) => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: { UidsGrid, UidsGridItem, UidsCta },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  setup() {
+    return { args }
+  },
+  // And then the `args` are bound to your component with `v-bind="args"`
+  template: `
+    <div :class="args.section_background" style="padding-top: 2rem; padding-bottom: 2rem;">
+      <uids-grid :type="args.grid_type">
+        <uids-grid-item v-for="item in args.record_count" :key="item">
+          <uids-cta
+            :url="args.url"
+            :background="args.background"
+            :title="args.title"
+            :button_label="args.button_label"
+            :button_icon="args.button_icon"
+            :button_align_right="args.button_align_right"
+            :details="args.details"
+            :headline_style="args.headline_style"
+            :orientation="args.orientation"
+          >
+            <template #details v-if="args.details"><div v-html="args.details" ></div></template>
+            <template #title v-if="args.title"><div :class="getClasses" v-html="args.title" ></div></template>
+            <template #button_icon v-if="args.button_icon"><span v-html="args.button_icon" ></span></template>
+          </uids-cta>
+        </uids-grid-item>
+      </uids-grid>
+    </div>
+  `,
+})
+
+export const Grid = GridTemplate.bind({})
+Grid.args = {
+  ...Centered.args,
+  grid_type: 'threecol--33-34-33',
+  record_count: 3,
+}

src/components/cta/Cta.vue

@@ -80,12 +80,12 @@ const buttonClasses = computed(() => {
       <div class="cta__content" v-if="details" >
         <slot name="details">{{ details }}</slot>
       </div>
+      <div class="cta__link" v-if="button_label" >
+        <uids-button :class="buttonClasses"  :url="url" size="medium">
+          <slot name="button_label">{{ button_label }}</slot>
+          <slot name="button_icon"></slot>
+        </uids-button>
+      </div>
     </div>
-    <footer class="cta__link" v-if="button_label" >
-      <uids-button :class="buttonClasses"  :url="url" size="medium">
-        <slot name="button_label">{{ button_label }}</slot>
-        <slot name="button_icon"></slot>
-      </uids-button>
-    </footer>
   </div>
 </template>

src/scss/abstracts/_headline-mixins.scss

@@ -28,7 +28,7 @@
   font-family: $font-family-caps;
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
-  font-weight: bold;
+  font-weight: 700;
   font-style: normal;
   font-display: swap;
 }
@@ -70,7 +70,6 @@
   [class*="bg--gold"] & {
     background: $secondary;
     color: #fff;
-    font-weight: 400;
   }
   [class*="bg--gold"] [class*="bg--black"] & {
     background: $primary;

src/scss/components/_headline.scss

@@ -50,14 +50,6 @@
   @include headline-highlight-word;
 }
 
-.bold-headline--caps .headline__heading,
-.headline--uppercase .headline__heading,
-.headline--uppercase .headline__text {
-  [class*="bg--gold"] & {
-    font-weight: 400;
-  }
-}
-
 .bold-headline--caps .headline__heading span,
 .headline--uppercase .headline__heading span,
 .headline--uppercase .headline__text span {