playbook_ui 13.34.0.pre.alpha.PLAY14143372 → 13.34.0.pre.alpha.PLAY14143373

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3d7c06af6de4de1eca3eb2fc8730a1aef14bed8bcd201956301854e34cfbddd5
-  data.tar.gz: a40334453ef2464508a473895cf2109743b2990e8e852ac842d19c43b1fb7a31
+  metadata.gz: 36b22bcec044ccc2dc38617892d16d11d3315798c45ba1c6eb4eb917859c4a11
+  data.tar.gz: 812f6f8cc2ec0fb4d270fee84a70fd9462dc7aea2ced21591f4592db402e0576
 SHA512:
-  metadata.gz: 998396f1c63377bf30146be040990dc0125c407bfd185889091289092b59d7ba3fa813e3eca730d588268bb164ec2ef3fed0e30a8b321b3b208ebc402542f3a0
-  data.tar.gz: 0ab76bd090f5b1873b76f7841c34dfadf48edfe3928e78e9f17f2db76fc21b71158f8f448edf47ed7e1fbb8ff13eb47c678311a857634c33fbe414539e9cb300
+  metadata.gz: b34badff8320ee92ed636ca67bd3744933624f58f20811be0e8cc4a575dbc7b9e07fd34a7108675deb87fd126341e5f12e450806e806d5b93dc545b7942b1b8c
+  data.tar.gz: b6e00cfb7a261f9c9539a9ef976100f22771f00a5a34d483320f24bf445213ae936b5edeb12478f545a0dbf5b841448daceb7fac06ab3107f4dfb1a794650469

data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.scss

@@ -0,0 +1,11 @@
+[class^='pb_weekday_stacked'] {
+  &[class*='_left'] {
+    text-align: left;
+  }
+  &[class*='_center'] {
+    text-align: center;
+  }
+  &[class*='_right'] {
+    text-align: right;
+  }
+}

data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.tsx

@@ -0,0 +1,83 @@
+import React from 'react'
+import classnames from 'classnames'
+import { globalProps } from '../utilities/globalProps'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
+
+import Caption from '../pb_caption/_caption'
+import Title from '../pb_title/_title'
+import DateTime from '../pb_kit/dateTime';
+import { GenericObject } from '../types'
+
+type WeekdayStackedProps = {
+  align?: "left" | "center" | "right",
+  aria?: {[key:string]:string },
+  className?: string,
+  dark?: boolean,
+  data?: GenericObject,
+  date: Date,
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  id?: string,
+  variant?: "day_only" | "month_day" | "expanded",
+  compact?: boolean,
+}
+
+const getDayOfWeek = (value: Date, compact: boolean) => {
+  if (compact) {
+    return DateTime.toDayAbbr(value)
+  } else {
+    return DateTime.toWeekday(value)
+  }
+}
+
+const getFormattedDate = (value: Date, variant: "day_only" | "month_day" | "expanded")  => {
+  if (variant === 'day_only') {
+    return DateTime.toDay(value).toString()
+  } else {
+    const format = variant === 'expanded' ? 'expanded' : 'month_day'
+    return DateTime.toCustomFormat(value, format)
+  }
+}
+
+const WeekdayStacked = (props: WeekdayStackedProps) => {
+  const {
+    align = 'left',
+    aria = {},
+    className,
+    dark = false,
+    data = {},
+    date = new Date(),
+    htmlOptions = {},
+    id,
+    variant = 'month_day',
+    compact = false,
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
+  const classes = classnames(
+    buildCss('pb_weekday_stacked_kit', align),
+    globalProps(props),
+    className
+  )
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
+        id={id}
+    >
+      <Caption dark={dark}>{getDayOfWeek(date, compact)}</Caption>
+      <Title
+          dark={dark}
+          size={4}
+          tag="span"
+          text={getFormattedDate(date, variant)}
+      />
+    </div>
+  )
+}
+
+export default WeekdayStacked

data/app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_compact.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("weekday_stacked", props: {variant: "expanded", compact: true}) %>
+<%= pb_rails("weekday_stacked", props: { variant: "day_only" , compact: true, align: "center"}) %>
+<%= pb_rails("weekday_stacked", props: { variant: "month_day", compact: true, align: "right" }) %>

data/app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_compact.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+import WeekdayStacked from '../_weekday_stacked'
+
+const WeekdayStackedCompact = (props) => (
+  <div>
+    <WeekdayStacked
+        compact
+        variant="day_only"
+        {...props}
+    />
+    <WeekdayStacked
+        align="center"
+        compact
+        variant="month_day"
+        {...props}
+    />
+    <WeekdayStacked
+        align="right"
+        compact
+        variant="expanded"
+        {...props}
+    />
+  </div>
+)
+
+export default WeekdayStackedCompact

data/app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_default.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("weekday_stacked") %>
+<%= pb_rails("weekday_stacked", props: {align: 'center'}) %>
+<%= pb_rails("weekday_stacked", props: {align: 'right'}) %>

data/app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_default.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+import WeekdayStacked from '../_weekday_stacked'
+
+const WeekdayStackedDefault = (props) => (
+  <div>
+    <WeekdayStacked
+        className="test"
+        {...props}
+    />
+    <WeekdayStacked
+        align="center"
+        {...props}
+    />
+    <WeekdayStacked
+        align="right"
+        {...props}
+    />
+  </div>
+)
+
+export default WeekdayStackedDefault

data/app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_variant.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("weekday_stacked", props: {variant: "expanded", }) %>
+<%= pb_rails("weekday_stacked", props: { variant: "day_only", align: "center" }) %>
+<%= pb_rails("weekday_stacked", props: { variant: "month_day", align: "right" }) %>

data/app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_variant.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+
+import WeekdayStacked from '../_weekday_stacked'
+
+const WeekdayStackedVariant = (props) => (
+  <div>
+    <WeekdayStacked
+        variant="day_only"
+        {...props}
+    />
+    <WeekdayStacked
+        align="center"
+        variant="month_day"
+        {...props}
+    />
+    <WeekdayStacked
+        align="right"
+        variant="expanded"
+        {...props}
+    />
+  </div>
+)
+
+export default WeekdayStackedVariant

data/app/pb_kits/playbook/pb_weekday_stacked/docs/example.yml

@@ -0,0 +1,12 @@
+examples:
+  
+  rails:
+  - weekday_stacked_default: Default
+  - weekday_stacked_compact: Compact
+  - weekday_stacked_variant: Variant
+  
+  
+  react:
+  - weekday_stacked_default: Default
+  - weekday_stacked_compact: Compact
+  - weekday_stacked_variant: Variant

data/app/pb_kits/playbook/pb_weekday_stacked/docs/index.js

@@ -0,0 +1,3 @@
+export { default as WeekdayStackedDefault } from './_weekday_stacked_default.jsx'
+export { default as WeekdayStackedVariant } from './_weekday_stacked_variant.jsx'
+export { default as WeekdayStackedCompact } from './_weekday_stacked_compact.jsx'

data/app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.html.erb

@@ -0,0 +1,4 @@
+<%= pb_content_tag do %>
+    <%= pb_rails("caption", props: {dark: object.dark, text: object.day_of_week}) %>
+    <%= pb_rails("title", props: {dark: object.dark, size: 4, tag: "span", text: object.formatted_month_and_day}) %>
+<% end %>

data/app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbWeekdayStacked
+    class WeekdayStacked < Playbook::KitBase
+      prop :align, type: Playbook::Props::Enum,
+                   values: %w[left center right],
+                   default: "left"
+
+      prop :date, type: Playbook::Props::Date,
+                  default: ::Date.current
+
+      prop :compact, type: Playbook::Props::Boolean,
+                     default: false
+
+      prop :variant, type: Playbook::Props::Enum,
+                     values: %w[day_only expanded month_day],
+                     default: "month_day"
+
+      def classname
+        generate_classname("pb_weekday_stacked_kit", align)
+      end
+
+      def day_of_week
+        day = Playbook::PbKit::PbDateTime.new(date)
+        formatted_day = compact ? day.to_day_of_week_compact : day.to_day_of_week
+        content_tag(:time, datetime: day.to_iso) do
+          formatted_day
+        end
+      end
+
+      def formatted_month_and_day
+        case variant
+        when "day_only" then day
+        when "expanded" then month_and_day(format: "%b %-d")
+        else month_and_day
+        end
+      end
+
+    private
+
+      def month_and_day(format: "%-m/%-d")
+        month_and_day = Playbook::PbKit::PbDateTime.new(date)
+        content_tag(:time, datetime: month_and_day.to_iso) do
+          date.strftime(format)
+        end
+      end
+
+      def day
+        day = Playbook::PbKit::PbDateTime.new(date)
+        content_tag(:time, datetime: day.to_iso) do
+          day.to_unpadded_day
+        end
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.test.jsx

@@ -0,0 +1,105 @@
+import React from "react";
+import { render, screen } from "../utilities/test-utils";
+
+import WeekdayStacked from "./_weekday_stacked";
+
+const TEST_DATE = "01/01/2020 00:00:000 GMT-0500";
+jest.setSystemTime(new Date(TEST_DATE));
+const testId = "weekdaystacked-kit";
+const realDate = Date;
+
+beforeEach(() => {
+  global.Date.now = jest.fn(() => new Date(TEST_DATE));
+});
+
+afterEach(() => {
+  global.Date = realDate;
+});
+
+describe("WeekdayStacked Kit", () => {
+  test("renders className", () => {
+    render(
+      <WeekdayStacked 
+          data={{ testid: testId }} 
+      />
+    );
+
+    const kit = screen.getByTestId(testId);
+    expect(kit).toHaveClass("pb_weekday_stacked_kit_left");
+  });
+
+  test("renders Caption with weekday", () => {
+    render(
+      <WeekdayStacked 
+          data={{ testid: testId }}
+      />
+    );
+
+    const kit = screen.getByTestId(testId);
+    const text = kit.querySelector(".pb_caption_kit_md");
+    expect(text.textContent).toEqual("Wed") 
+  });
+
+  test("renders Title with date", () => {
+    render(
+      <WeekdayStacked 
+          data={{ testid: testId }}
+      />
+    );
+
+    const kit = screen.getByTestId(testId);
+    const text = kit.querySelector(".pb_title_kit_size_4");
+    expect(text.textContent).toEqual("1/1") 
+  });
+
+  test("renders compact prop", () => {
+    render(
+      <WeekdayStacked 
+          compact
+          data={{ testid: testId }}
+      />
+    );
+
+    const kit = screen.getByTestId(testId);
+    const text = kit.querySelector(".pb_caption_kit_md");
+    expect(text.textContent).toEqual("W") 
+  });
+
+  test("renders align prop", () => {
+    render(
+        <WeekdayStacked 
+            align="left"
+            data={{ testid: testId }}
+        />
+    );
+      
+    const kit = screen.getByTestId(testId);
+    expect(kit).toHaveClass("pb_weekday_stacked_kit_left")
+  });
+
+  test("renders day_only variant prop", () => {
+    render(
+        <WeekdayStacked 
+            data={{ testid: testId }}
+            variant="day_only"
+        />
+    );
+      
+    const kit = screen.getByTestId(testId);
+    const text = kit.querySelector(".pb_title_kit_size_4");
+    expect(text.textContent).toEqual("1") 
+  });
+
+  test("renders expanded variant prop", () => {
+    render(
+        <WeekdayStacked 
+            data={{ testid: testId }}
+            variant="expanded"
+        />
+    );
+      
+    const kit = screen.getByTestId(testId);
+    const text = kit.querySelector(".pb_title_kit_size_4");
+    expect(text.textContent).toEqual("Jan 1") 
+  });
+});

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "13.34.0"
-  VERSION = "13.34.0.pre.alpha.PLAY14143372"
+  VERSION = "13.34.0.pre.alpha.PLAY14143373"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 13.34.0.pre.alpha.PLAY14143372
+  version: 13.34.0.pre.alpha.PLAY14143373
 platform: ruby
 authors:
 - Power UX
@@ -2899,6 +2899,19 @@ files:
 - app/pb_kits/playbook/pb_walkthrough/docs/example.yml
 - app/pb_kits/playbook/pb_walkthrough/docs/index.js
 - app/pb_kits/playbook/pb_walkthrough/walkthrough.test.jsx
+- app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.scss
+- app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.tsx
+- app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_compact.html.erb
+- app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_compact.jsx
+- app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_default.html.erb
+- app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_default.jsx
+- app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_variant.html.erb
+- app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_variant.jsx
+- app/pb_kits/playbook/pb_weekday_stacked/docs/example.yml
+- app/pb_kits/playbook/pb_weekday_stacked/docs/index.js
+- app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.html.erb
+- app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.rb
+- app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.test.jsx
 - app/pb_kits/playbook/tokens/_animation-curves.scss
 - app/pb_kits/playbook/tokens/_border_radius.scss
 - app/pb_kits/playbook/tokens/_colors.scss