@testgorilla/tgo-ui 2.9.0 → 2.10.1

package/projects/tgo-canopy-ui/foundations/colors/colors.stories.ts

@@ -0,0 +1,426 @@
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { ColorsComponent } from './colors.component';
+
+const parameters = {
+  design: {
+    name: 'Figma design',
+    type: 'figma',
+    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=2520-2428&mode=design&t=c2pEymTeiu5SHFCn-0',
+  },
+};
+
+export default {
+  title: 'Foundations/Colors',
+  component: ColorsComponent,
+  decorators: [
+    moduleMetadata({
+      declarations: [ColorsComponent],
+    }),
+  ],
+} as Meta;
+
+const Template: Story = args => ({ props: args });
+
+export const PrimaryTeal = Template.bind({});
+PrimaryTeal.args = {
+  dataColors: [
+    {
+      colorVariable: '$tgo-teal-60b',
+      colorClass: 'teal60b',
+      colorHex: '#1C443C',
+    },
+    {
+      colorVariable: '$tgo-teal-30b',
+      colorClass: 'teal30b',
+      colorHex: '#31766A',
+    },
+    {
+      colorVariable: '$tgo-teal-default',
+      colorClass: 'tealDefault',
+      colorHex: '#46A997',
+    },
+    {
+      colorVariable: '$tgo-teal-30w',
+      colorClass: 'teal30w',
+      colorHex: '#7EC3B6',
+    },
+    {
+      colorVariable: '$tgo-teal-60w',
+      colorClass: 'teal60w',
+      colorHex: '#B5DDD5',
+    },
+    {
+      colorVariable: '$tgo-teal-90w',
+      colorClass: 'teal90w',
+      colorHex: '#ECF6F5',
+    },
+  ],
+};
+PrimaryTeal.parameters = parameters;
+
+export const PrimaryPetrol = Template.bind({});
+PrimaryPetrol.args = {
+  dataColors: [
+    {
+      colorVariable: '$tgo-petrol-60b',
+      colorClass: 'petrol60b',
+      colorHex: '#102930',
+    },
+    {
+      colorVariable: '$tgo-petrol-30b',
+      colorClass: 'petrol30b',
+      colorHex: '#1B4754',
+    },
+    {
+      colorVariable: '$tgo-petrol-default',
+      colorClass: 'petrolDefault',
+      colorHex: '#276678',
+    },
+    {
+      colorVariable: '$tgo-petrol-30w',
+      colorClass: 'petrol30w',
+      colorHex: '#6894A0',
+    },
+    {
+      colorVariable: '$tgo-petrol-60w',
+      colorClass: 'petrol60w',
+      colorHex: '#A9C2C9',
+    },
+    {
+      colorVariable: '$tgo-teal-90w',
+      colorClass: 'teal90w',
+      colorHex: '#E9F0F1',
+    },
+  ],
+};
+PrimaryPetrol.parameters = parameters;
+
+export const PrimaryError = Template.bind({});
+PrimaryError.args = {
+  dataColors: [
+    {
+      colorVariable: '$tgo-error-60b',
+      colorClass: 'error60b',
+      colorHex: '#513131',
+    },
+    {
+      colorVariable: '$tgo-error-30b',
+      colorClass: 'error30b',
+      colorHex: '#8E5655',
+    },
+    {
+      colorVariable: '$tgo-error-default',
+      colorClass: 'errorDefault',
+      colorHex: '#cb7b7a',
+    },
+    {
+      colorVariable: '$tgo-error-60w',
+      colorClass: 'error60w',
+      colorHex: '#E3C3C6',
+    },
+  ],
+};
+PrimaryError.parameters = parameters;
+
+export const PrimaryWarning = Template.bind({});
+PrimaryWarning.args = {
+  dataColors: [
+    {
+      colorVariable: '$tgo-warning-default',
+      colorClass: 'warningDefault',
+      colorHex: '#cca45f',
+    },
+  ],
+};
+PrimaryWarning.parameters = parameters;
+
+export const SecondaryColors = Template.bind({});
+SecondaryColors.args = {
+  dataColors: [
+    {
+      colorVariable: '$tgo-teal-secondary',
+      colorClass: 'tealSecondary',
+      colorHex: '#CBD6CB',
+    },
+    {
+      colorVariable: '$tgo-petrol-secondary',
+      colorClass: 'petrolSecondary',
+      colorHex: '#C8D7DE',
+    },
+    {
+      colorVariable: '$tgo-error-secondary',
+      colorClass: 'errorSecondary',
+      colorHex: '#F0DAD9',
+    },
+    {
+      colorVariable: '$tgo-warning-secondary',
+      colorClass: 'warningSecondary',
+      colorHex: '#F0D6BB',
+    },
+  ],
+};
+SecondaryColors.parameters = parameters;
+
+export const GreyScale = Template.bind({});
+GreyScale.args = {
+  dataColors: [
+    {
+      colorVariable: '$tgo-black',
+      colorClass: 'black',
+      colorHex: '#00000',
+    },
+    {
+      colorVariable: '$tgo-dark',
+      colorClass: 'dark',
+      colorHex: '#888888',
+    },
+    {
+      colorVariable: '$tgo-medium',
+      colorClass: 'medium',
+      colorHex: '#E0E0E0',
+    },
+    {
+      colorVariable: '$tgo-grey',
+      colorClass: 'grey',
+      colorHex: '#EDEDED',
+    },
+    {
+      colorVariable: '$tgo-light',
+      colorClass: 'light',
+      colorHex: '#F6F6F6',
+    },
+    {
+      colorVariable: '$tgo-white',
+      colorClass: 'white',
+      colorHex: '#ffffff',
+    },
+  ],
+};
+GreyScale.parameters = parameters;
+
+
+export const BrandColors = Template.bind({});
+BrandColors.args = {
+  dataColors: [
+    {
+      colorVariable: '$brand-60',
+      colorHex: '#A90686',
+      colorClass: 'brand-60',
+    },
+    {
+      colorVariable: '$brand-50',
+      colorHex: '#D410AA',
+      colorClass: 'brand-50',
+    },
+    {
+      colorVariable: '$brand-40',
+      colorHex: '#FF54DA',
+      colorClass: 'brand-40',
+    },
+    {
+      colorVariable: '$brand-30',
+      colorHex: '#FFB3EE',
+      colorClass: 'brand-30',
+    },
+    {
+      colorVariable: '$brand-20',
+      colorHex: '#FFE6FA',
+      colorClass: 'brand-20',
+    },
+    {
+      colorVariable: '$brand-10',
+      colorHex: '#FFF2FC',
+      colorClass: 'brand-10',
+    },
+  ],
+};
+BrandColors.parameters = parameters;
+
+
+export const RebrandGrayscaleColors = Template.bind({});
+RebrandGrayscaleColors.args = {
+  dataColors: [
+    {
+      colorVariable: '$grayscale-50',
+      colorHex: '#666666',
+      colorClass: 'grayscale-50',
+    },
+    {
+      colorVariable: '$grayscale-40',
+      colorHex: '#919191',
+      colorClass: 'grayscale-40',
+    },
+    {
+      colorVariable: '$grayscale-30',
+      colorHex: '#A7A7A7',
+      colorClass: 'grayscale-30',
+    },
+    {
+      colorVariable: '$grayscale-20',
+      colorHex: '#D3D3D3',
+      colorClass: 'grayscale-20',
+    },
+    {
+      colorVariable: '$grayscale-10',
+      colorHex: '#E9E9E9',
+      colorClass: 'grayscale-10',
+    },
+  ],
+};
+RebrandGrayscaleColors.parameters = parameters;
+
+
+export const RebrandBlackColor = Template.bind({});
+RebrandBlackColor.args = {
+  dataColors: [
+    {
+      colorVariable: '$black',
+      colorHex: '#242424',
+      colorClass: 'black',
+    },
+  ],
+};
+RebrandBlackColor.parameters = parameters;
+
+export const RebrandAccentColors = Template.bind({});
+RebrandAccentColors.args = {
+  dataColors: [
+       {
+      colorVariable: '$accent-20',
+      colorHex: '#FFF5ED',
+      colorClass: 'accent-20',
+    },
+    {
+      colorVariable: '$accent-10',
+      colorHex: '#FFFAF6',
+      colorClass: 'accent-10',
+    },
+  ],
+};
+RebrandAccentColors.parameters = parameters;
+
+
+export const RebrandInformativeColors = Template.bind({});
+RebrandInformativeColors.args = {
+  dataColors: [
+    {
+      colorVariable: '$informative-40',
+      colorHex: '#0165FC',
+      colorClass: 'informative-40',
+    },
+    {
+      colorVariable: '$informative-30',
+      colorHex: '#277CFD',
+      colorClass: 'informative-30',
+    },
+    {
+      colorVariable: '$informative-20',
+      colorHex: '#99C1FE',
+      colorClass: 'informative-20',
+    },
+    {
+      colorVariable: '$informative-10',
+      colorHex: '#D9E8FF',
+      colorClass: 'informative-10',
+    },
+  ],
+};
+RebrandInformativeColors.parameters = parameters;
+
+
+export const RebrandSuccessColors = Template.bind({});
+RebrandSuccessColors.args = {
+  dataColors: [
+    {
+      colorVariable: '$success-50',
+      colorHex: '#88B901',
+      colorClass: 'success-50',
+    },
+    {
+      colorVariable: '$success-40',
+      colorHex: '#A0D900',
+      colorClass: 'success-40',
+    },
+    {
+      colorVariable: '$success-30',
+      colorHex: '#C6E866',
+      colorClass: 'success-30',
+    },
+    {
+      colorVariable: '$success-20',
+      colorHex: '#E2F4B3',
+      colorClass: 'success-20',
+    },
+    {
+      colorVariable: '$success-10',
+      colorHex: '#F5FAE3',
+      colorClass: 'success-10',
+    },
+  ],
+};
+RebrandSuccessColors.parameters = parameters;
+
+export const RebrandErrorColors = Template.bind({});
+RebrandErrorColors.args = {
+  dataColors: [
+    {
+      colorVariable: '$error-50',
+      colorHex: '#E02800',
+      colorClass: 'error-50',
+    },
+    {
+      colorVariable: '$error-40',
+      colorHex: '#FF3003',
+      colorClass: 'error-40',
+    },
+    {
+      colorVariable: '$error-30',
+      colorHex: '#FF6E4F',
+      colorClass: 'error-30',
+    },
+    {
+      colorVariable: '$error-20',
+      colorHex: '#FFAC9A',
+      colorClass: 'error-20',
+    },
+    {
+      colorVariable: '$error-10',
+      colorHex: '#FFEAE6',
+      colorClass: 'error-10',
+    },
+  ],
+};
+RebrandAccentColors.parameters = parameters;
+
+
+export const RebrandWarningColors = Template.bind({});
+RebrandWarningColors.args = {
+  dataColors: [
+    {
+      colorVariable: '$warning-50',
+      colorHex: '#D07D00',
+      colorClass: 'warning-50',
+    },
+    {
+      colorVariable: '$warning-40',
+      colorHex: '#FF9A03',
+      colorClass: 'warning-40',
+    },
+    {
+      colorVariable: '$warning-30',
+      colorHex: '#FFC268',
+      colorClass: 'warning-30',
+    },
+    {
+      colorVariable: '$warning-20',
+      colorHex: '#FFE1B3',
+      colorClass: 'warning-20',
+    },
+    {
+      colorVariable: '$warning-10',
+      colorHex: '#FFF5E6',
+      colorClass: 'warning-10',
+    },
+  ],
+};
+RebrandWarningColors.parameters = parameters;

package/projects/tgo-canopy-ui/foundations/typography/typography.stories.ts

@@ -0,0 +1,195 @@
+import { Meta, Story } from '@storybook/angular';
+import { transformTheme } from '../../utils/transform-theme';
+
+const parameters = {
+  design: {
+    name: 'Figma design',
+    type: 'figma',
+    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=2641-3643&mode=design&t=zuwnLwMZKGT1Spr6-0',
+  },
+};
+
+const styles = `
+    h1,
+    h2,
+    h3,
+    .h1,
+    .h2,
+    .h3 {
+      font-weight: 400;
+      margin: 0;
+    }
+
+    h4,
+    h5,
+    h6,
+    .h4,
+    .h5,
+    .h6 {
+      font-weight: 700;
+      margin: 0;
+    }
+
+    h1,
+    .h1 {
+      font-size: 40px;
+      line-height: 60px;
+      font-weight: 700;
+    }
+
+    h2,
+    .h2 {
+      font-size: 24px;
+      line-height: 36px;
+
+      &.bold {
+        font-weight: 700;
+      }
+    }
+
+    h3,
+    .h3 {
+      font-size: 20px;
+      line-height: 28px;
+
+      &.bold {
+        font-weight: 700;
+      }
+    }
+
+    h4,
+    .h4 {
+      font-size: 16px;
+      line-height: 24px;
+    }
+
+    h5,
+    .h5 {
+      font-size: 14px;
+      line-height: 20px;
+    }
+
+    h6,
+    .h6 {
+      font-size: 12px;
+      line-height: 16px;
+      text-transform: uppercase;
+    }
+
+    body {
+      font-size: 14px;
+      line-height: 20px;
+    }
+
+    strong, b {
+      font-weight: 700;
+    }
+
+    .featured {
+      font-size: 16px;
+      line-height: 24px;
+    }
+
+    p,
+    .featured,
+    .caption {
+      .semibold {
+        font-weight: 600;
+        color: #46A997;
+      }
+    }
+
+    small {
+      font-size: 8px;
+      line-height: 12px;
+    }
+
+    caption,
+    .caption {
+      font-size: 12px;
+      line-height: 16px;
+      display: inline-block;
+    }
+  `;
+
+export default {
+  title: 'Foundations/Typography',
+} as Meta;
+
+export const Titles: Story = {
+  render: (args, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    return {
+      styles: [styles],
+      template: _theme === 'classic'
+        ? `<div style="margin-bottom: 16px">Titles can be used with \`H1\`, \`H2\`, \`H3\`, \`H4\`, \`H5\` and \`H6\` tags. These css classes are available for using: \`h1\`, \`h2\`, \`h3\`, \`h4\`, \`h5\` and \`h6\`</div>
+    <div style="display: flex; flex-direction: column">
+      <h1>H1 Heading</h1>
+      <h2>H2 Heading Regular</h2>
+      <h2 class="bold">H2 Heading Bold</h2>
+      <h3>H3 Heading Regular</h3>
+      <h3 class="bold">H3 Heading Bold</h3>
+      <h4>H4 Heading</h4>
+      <h5>H5 Heading</h5>
+      <h6>H6 Heading</h6>
+    </div>`
+        : `<div style="margin-bottom: 16px">Titles can be used with \`H1\`, \`H2\`, \`H3\`, \`H4\`, \`H5\` tags. These css classes are available for using: \`h1\`, \`h2\`, \`h3\`, \`h4\`, \`h5\`</div>
+    <div style="display: flex; flex-direction: column">
+      <h1 class="black">H1 Heading Black</h1>
+      <h1>H1 Heading Regular</h1>
+      <h2>H2 Heading Black</h2>
+      <h3 class="bold">H3 Heading Bold</h3>
+      <h3>H3 Heading Regular</h3>
+      <h4>H4 Heading</h4>
+      <h5>H5 Heading</h5>
+    </div>`
+    }
+  }
+} as Story
+
+Titles.parameters = parameters;
+
+export const TextStyles: Story = {
+  render: (args, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    return {
+      styles: [styles],
+      template: `
+    <div>- Body has a default setting and a featured style. Both styles has \`strong\` and \`b\` tag for bold and \`semibold\` css class for \`font-weight: 600\`.</div>
+    <div style="margin-bottom: 16px">- Also \`small\` tag is available with bold style, and \`caption\` tag or css class with bold and semibold styles.</div>
+    <div style="display: flex; flex-direction: column">
+      <h3 class="bold">Body</h3>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Sed laoreet elit sit amet odio congue</strong>, in congue sem iaculis. Suspendisse ut purus lacinia, <span class="semibold">dignissim lorem interdum</span>, feugiat dui. </p>
+      <h3 class="bold">Featured</h3>
+      <p class="featured">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Sed laoreet elit sit amet odio congue</strong>, in congue sem iaculis. Suspendisse ut purus lacinia, <span class="semibold">dignissim lorem interdum</span>, feugiat dui. </p>
+      <h3 class="bold">Hover state</h3>
+      <p class="hover-state">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Sed laoreet elit sit amet odio congue</strong>, in congue sem iaculis. Suspendisse ut purus lacinia, <span class="semibold">dignissim lorem interdum</span>, feugiat dui. </p>
+       <h3 class="bold">Hover state Large</h3>
+      <p class="large-hover-state">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Sed laoreet elit sit amet odio congue</strong>, in congue sem iaculis. Suspendisse ut purus lacinia, <span class="semibold">dignissim lorem interdum</span>, feugiat dui. </p>
+       <h3 class="bold">Label</h3>
+      <p class="label">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Sed laoreet elit sit amet odio congue</strong>, in congue sem iaculis. Suspendisse ut purus lacinia, <span class="semibold">dignissim lorem interdum</span>, feugiat dui. </p>
+        <h3 class="bold">Button label</h3>
+      <p class="button-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Sed laoreet elit sit amet odio congue</strong>, in congue sem iaculis. Suspendisse ut purus lacinia, <span class="semibold">dignissim lorem interdum</span>, feugiat dui. </p>
+        <h3 class="bold">Hyperlink Large</h3>
+      <p class="hyperlink-large">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Sed laoreet elit sit amet odio congue</strong>, in congue sem iaculis. Suspendisse ut purus lacinia, <span class="semibold">dignissim lorem interdum</span>, feugiat dui. </p>
+        <h3 class="bold">Hyperlink Small</h3>
+      <p class="hyperlink-small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Sed laoreet elit sit amet odio congue</strong>, in congue sem iaculis. Suspendisse ut purus lacinia, <span class="semibold">dignissim lorem interdum</span>, feugiat dui. </p>
+        <h3 class="bold">Hyperlink</h3>
+      <p class="hyperlink">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Sed laoreet elit sit amet odio congue</strong>, in congue sem iaculis. Suspendisse ut purus lacinia, <span class="semibold">dignissim lorem interdum</span>, feugiat dui. </p>
+         <h3 class="bold">Hyperlink</h3>
+      <p class="hyperlink">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Sed laoreet elit sit amet odio congue</strong>, in congue sem iaculis. Suspendisse ut purus lacinia, <span class="semibold">dignissim lorem interdum</span>, feugiat dui. </p>
+         <h3 class="bold">Body Large</h3>
+      <p class="body-large">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Sed laoreet elit sit amet odio congue</strong>, in congue sem iaculis. Suspendisse ut purus lacinia, <span class="semibold">dignissim lorem interdum</span>, feugiat dui. </p>
+         <h3 class="bold">Body Large Bold</h3>
+      <p class="body-large-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Sed laoreet elit sit amet odio congue</strong>, in congue sem iaculis. Suspendisse ut purus lacinia, <span class="semibold">dignissim lorem interdum</span>, feugiat dui. </p>
+         <h3 class="bold">Body Small Bold</h3>
+      <p class="body-small-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Sed laoreet elit sit amet odio congue</strong>, in congue sem iaculis. Suspendisse ut purus lacinia, <span class="semibold">dignissim lorem interdum</span>, feugiat dui. </p>
+         <h3 class="bold">Body Small Regular</h3>
+      <p class="body-small-regular">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Sed laoreet elit sit amet odio congue</strong>, in congue sem iaculis. Suspendisse ut purus lacinia, <span class="semibold">dignissim lorem interdum</span>, feugiat dui. </p>
+      <caption>Pellentesque a pellentesque nunc, id dignissim lorem. In eu turpis arcu. <strong>Sed sed erat lacinia, ultricies leo sed, egestas purus</strong>. <span class="semibold">Aliquam erat volutpat.</span></caption>
+    </div>
+  `,
+    }
+  }
+} as Story
+TextStyles.parameters = parameters;

package/projects/tgo-canopy-ui/mocked-assets/images/some_progress.svg

@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M36 20C36 23.1645 35.0616 26.2579 33.3035 28.8891C31.5454 31.5203 29.0466 33.5711 26.1229 34.7821C23.1993 35.9931 19.9823 36.3099 16.8786 35.6926C13.7749 35.0752 10.924 33.5514 8.68631 31.3137C6.44867 29.0761 4.92481 26.2252 4.30744 23.1215C3.69008 20.0178 4.00692 16.8007 5.21792 13.8771C6.42891 10.9535 8.47967 8.45461 11.1108 6.69651C13.742 4.9384 16.8355 4.00001 20 4" stroke="#E0E0E0" stroke-width="6.08"/>
+<path d="M20 4C23.1645 4 26.2579 4.93838 28.8891 6.69648C31.5203 8.45458 33.5711 10.9534 34.7821 13.8771C35.9931 16.8007 36.3099 20.0177 35.6926 23.1214C35.0752 26.2251 33.5514 29.076 31.3137 31.3137C29.0761 33.5513 26.2252 35.0752 23.1215 35.6926C20.0178 36.3099 16.8007 35.9931 13.8771 34.7821C10.9535 33.5711 8.45462 31.5203 6.69651 28.8892C4.9384 26.258 4.00001 23.1645 4 20" stroke="#46A997" stroke-width="6.08" stroke-linecap="round"/>
+</svg>