Feat/separator

common/changes/@ducky/plumage-react/feat-separator_2022-05-02-11-19.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@ducky/plumage-react",
+      "comment": "",
+      "type": "none"
+    }
+  ],
+  "packageName": "@ducky/plumage-react"
+}

common/changes/@ducky/plumage-react/feat-separator_2022-05-02-12-05.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@ducky/plumage-react",
+      "comment": "",
+      "type": "none"
+    }
+  ],
+  "packageName": "@ducky/plumage-react"
+}

common/changes/@ducky/plumage/feat-separator_2022-05-02-09-21.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@ducky/plumage",
+      "comment": "Created separator component and defined first props",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@ducky/plumage"
+}

examples/react-app/src/index.tsx

@@ -8,6 +8,7 @@ import {
   PlmgSidebar,
   PlmgSidebarItem,
   PlmgSvgIcon,
+  PlmgSeparator,
 } from '@ducky/plumage-react';
 
 ReactDOM.render(
@@ -39,8 +40,24 @@ ReactDOM.render(
       </PlmgSidebarItem>
     </PlmgSidebar>
     <PlmgHeader slot={'header'}>
-      <div slot={'right'}>MenuItem</div>
+      <div
+        slot={'right'}
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+        }}
+      >
+        <span>Menu Item</span>
+        <PlmgSeparator
+          thickness="thick"
+          direction="vertical"
+          color="#78909C"
+        ></PlmgSeparator>
+        <span>Menu Item 2</span>
+      </div>
     </PlmgHeader>
+
     <div slot={'content'} style={{ padding: '24px' }}>
       <PlmgButton
         onClick={(e: any) => {
@@ -75,6 +92,7 @@ ReactDOM.render(
       >
         <div slot="slot-1">
           <h1>PlmgCard slot-1</h1>
+          <PlmgSeparator thickness="thick"></PlmgSeparator>
         </div>
         <div slot="slot-2">
           <h1>PlmgCard slot-2</h1>

packages/component-library-react/src/components.ts

@@ -12,6 +12,7 @@ export const PlmgButton = /*@__PURE__*/createReactComponent<JSX.PlmgButton, HTML
 export const PlmgCard = /*@__PURE__*/createReactComponent<JSX.PlmgCard, HTMLPlmgCardElement>('plmg-card');
 export const PlmgHeader = /*@__PURE__*/createReactComponent<JSX.PlmgHeader, HTMLPlmgHeaderElement>('plmg-header');
 export const PlmgPageContainer = /*@__PURE__*/createReactComponent<JSX.PlmgPageContainer, HTMLPlmgPageContainerElement>('plmg-page-container');
+export const PlmgSeparator = /*@__PURE__*/createReactComponent<JSX.PlmgSeparator, HTMLPlmgSeparatorElement>('plmg-separator');
 export const PlmgSidebar = /*@__PURE__*/createReactComponent<JSX.PlmgSidebar, HTMLPlmgSidebarElement>('plmg-sidebar');
 export const PlmgSidebarItem = /*@__PURE__*/createReactComponent<JSX.PlmgSidebarItem, HTMLPlmgSidebarItemElement>('plmg-sidebar-item');
 export const PlmgSvgIcon = /*@__PURE__*/createReactComponent<JSX.PlmgSvgIcon, HTMLPlmgSvgIconElement>('plmg-svg-icon');

packages/component-library/.storybook/preview.js

@@ -1,9 +1,9 @@
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
+  actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
     matchers: {
       color: /(background|color)$/i,
       date: /Date$/,
     },
   },
-}
+};

packages/component-library/src/components.d.ts

@@ -95,6 +95,20 @@ export namespace Components {
          */
         "sidebarExpanded": boolean;
     }
+    interface PlmgSeparator {
+        /**
+          * Define icon's color.  Can be any valid CSS color value.  Default is plmgColorBorderNeutral
+         */
+        "color": string;
+        /**
+          * Define separator's direction.  Allowed values:   - vertical   - horizontal  Default: horizontal
+         */
+        "direction": string;
+        /**
+          * Define separator's thickness.  Allowed values:   - thin   - thick  Default: thin
+         */
+        "thickness": string;
+    }
     interface PlmgSidebar {
         /**
           * Invoke this method to collapse the sidebar.
@@ -187,6 +201,12 @@ declare global {
         prototype: HTMLPlmgPageContainerElement;
         new (): HTMLPlmgPageContainerElement;
     };
+    interface HTMLPlmgSeparatorElement extends Components.PlmgSeparator, HTMLStencilElement {
+    }
+    var HTMLPlmgSeparatorElement: {
+        prototype: HTMLPlmgSeparatorElement;
+        new (): HTMLPlmgSeparatorElement;
+    };
     interface HTMLPlmgSidebarElement extends Components.PlmgSidebar, HTMLStencilElement {
     }
     var HTMLPlmgSidebarElement: {
@@ -210,6 +230,7 @@ declare global {
         "plmg-card": HTMLPlmgCardElement;
         "plmg-header": HTMLPlmgHeaderElement;
         "plmg-page-container": HTMLPlmgPageContainerElement;
+        "plmg-separator": HTMLPlmgSeparatorElement;
         "plmg-sidebar": HTMLPlmgSidebarElement;
         "plmg-sidebar-item": HTMLPlmgSidebarItemElement;
         "plmg-svg-icon": HTMLPlmgSvgIconElement;
@@ -312,6 +333,20 @@ declare namespace LocalJSX {
          */
         "sidebarExpanded"?: boolean;
     }
+    interface PlmgSeparator {
+        /**
+          * Define icon's color.  Can be any valid CSS color value.  Default is plmgColorBorderNeutral
+         */
+        "color"?: string;
+        /**
+          * Define separator's direction.  Allowed values:   - vertical   - horizontal  Default: horizontal
+         */
+        "direction"?: string;
+        /**
+          * Define separator's thickness.  Allowed values:   - thin   - thick  Default: thin
+         */
+        "thickness"?: string;
+    }
     interface PlmgSidebar {
         /**
           * Define if the item is expanded on startup.
@@ -379,6 +414,7 @@ declare namespace LocalJSX {
         "plmg-card": PlmgCard;
         "plmg-header": PlmgHeader;
         "plmg-page-container": PlmgPageContainer;
+        "plmg-separator": PlmgSeparator;
         "plmg-sidebar": PlmgSidebar;
         "plmg-sidebar-item": PlmgSidebarItem;
         "plmg-svg-icon": PlmgSvgIcon;
@@ -392,6 +428,7 @@ declare module "@stencil/core" {
             "plmg-card": LocalJSX.PlmgCard & JSXBase.HTMLAttributes<HTMLPlmgCardElement>;
             "plmg-header": LocalJSX.PlmgHeader & JSXBase.HTMLAttributes<HTMLPlmgHeaderElement>;
             "plmg-page-container": LocalJSX.PlmgPageContainer & JSXBase.HTMLAttributes<HTMLPlmgPageContainerElement>;
+            "plmg-separator": LocalJSX.PlmgSeparator & JSXBase.HTMLAttributes<HTMLPlmgSeparatorElement>;
             "plmg-sidebar": LocalJSX.PlmgSidebar & JSXBase.HTMLAttributes<HTMLPlmgSidebarElement>;
             "plmg-sidebar-item": LocalJSX.PlmgSidebarItem & JSXBase.HTMLAttributes<HTMLPlmgSidebarItemElement>;
             "plmg-svg-icon": LocalJSX.PlmgSvgIcon & JSXBase.HTMLAttributes<HTMLPlmgSvgIconElement>;

packages/component-library/src/components/plmg-separator/plmg-separator.scss

@@ -0,0 +1,54 @@
+@use '~@ducky/plumage-tokens/dist/scss/default' as tokens;
+
+// Common styles to all shadow-DOM components
+// -------------------------------------------------
+:host {
+  height: inherit;
+  width: inherit;
+  display: block;
+}
+
+:host([hidden]) {
+  display: none;
+}
+// ------------- END Common styles -----------------
+
+// Component style
+// -------------------------------------------------
+
+.plmg-separator-container-vertical {
+  display: flex;
+  height: 100%;
+}
+.plmg-separator-container-horizontal {
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+
+.plmg-separator {
+  border-radius: tokens.$plmg-border-radius-xl;
+  border: none;
+  margin-block-start: 0;
+  margin-block-end: 0;
+
+  &.horizontal {
+    width: 100%;
+    &.thin {
+      height: tokens.$plmg-border-width-s;
+    }
+    &.thick {
+      height: tokens.$plmg-border-width-m;
+    }
+  }
+
+  &.vertical {
+    &.thin {
+      width: tokens.$plmg-border-width-s;
+    }
+    &.thick {
+      width: tokens.$plmg-border-width-m;
+    }
+  }
+}
+// ------------- END Component style ---------------

packages/component-library/src/components/plmg-separator/plmg-separator.stories.js

@@ -0,0 +1,103 @@
+import * as Utils from '../../stories/StencilStorybookUtils';
+import { directions, thicknesses } from './plmg-separator.types';
+
+export default {
+  title: 'Component/Separator',
+  parameters: {},
+  decorators: [],
+  argTypes: {
+    color: {
+      control: { type: 'color' },
+    },
+    direction: {
+      control: { type: 'select' },
+      options: ['horizontal', 'vertical'],
+    },
+    thickness: {
+      control: { type: 'select' },
+      options: ['thin', 'thick'],
+    },
+  },
+};
+
+const PROPS = ['color', 'direction', 'thickness'];
+const EVENTS = [];
+const CSS_VARS = [];
+
+const Template = (args) => {
+  const el = document.createElement('plmg-separator');
+  const wrapper = document.createElement('div');
+  wrapper.style.height = '300px';
+  wrapper.style.width = '300px';
+  Utils.bindProps(el, PROPS, args);
+  Utils.bindEvents(el, EVENTS, args);
+  Utils.bindStyles(el, CSS_VARS, args);
+  wrapper.appendChild(el);
+  return wrapper;
+};
+
+export const Primary = Template.bind({});
+Primary.storyName = 'Separator';
+Primary.args = {
+  direction: 'horizontal',
+  thickness: 'thin',
+};
+
+export const AllThicknesses = (args) => {
+  const htmlContent = thicknesses
+    .map(
+      (thickness) =>
+        `<div style="width: 300px; height: 300px"><plmg-separator thickness="${thickness}"></plmg separator></div>`
+    )
+    .join('')
+    .trim();
+
+  const el = document.createElement('div');
+  el.innerHTML = htmlContent;
+  el.style.display = 'flex';
+  el.style.justifyContent = 'space-between';
+  el.style['flex-wrap'] = 'wrap';
+  return el;
+};
+AllThicknesses.storyName = 'All thicknesses';
+
+export const AllDirections = (args) => {
+  const htmlContent = directions
+    .map(
+      (direction) =>
+        `<div style="width: 300px; height: 300px;">
+            <plmg-separator direction="${direction}"></plmg-separator>
+          </div>
+        `
+    )
+    .join('')
+    .trim();
+
+  const el = document.createElement('div');
+  el.innerHTML = htmlContent;
+  el.style.display = 'flex';
+  el.style.justifyContent = 'space-between';
+  el.style['flex-wrap'] = 'wrap';
+  return el;
+};
+AllDirections.storyName = 'All directions';
+
+export const AllVariations = (args) => {
+  let htmlContent = '';
+  directions.forEach((direction) => {
+    thicknesses.forEach((thickness) => {
+      htmlContent += `<div style="width: 300px; height: 300px;">
+      <plmg-separator direction="${direction}" thickness="${thickness}"></plmg-separator>
+    </div>
+  `;
+    });
+  });
+
+  const el = document.createElement('div');
+  el.innerHTML = htmlContent.trim();
+  el.style.display = 'flex';
+  el.style.justifyContent = 'space-between';
+  el.style['flex-wrap'] = 'wrap';
+  return el;
+};
+AllVariations.storyName = 'All variations';